Style Guide Fonts
Print this Page
MySolidWorks Site Typography

The typefaces used on MySolideWorks site are 3ds fonts and web safe font of Verdana,sans-serif . The 3ds webfonts are applied to brand-related types like headline, taglines, page and section titles, etc. The generice web fonts of “Verdana, sans-serif” are used in body text for description, summary and paragraph messages.

Summary of Fonts Usage on MySolidWorks Site

1. Font Face

Font Face Usage
3ds_semibold-webfont Apply to marketing and brand-related headlines, taglines on landing page banner, and page titles.
3ds_regular-webfont Apply to maketing and brand-related labels, tiles and names on navigation, section on landing pages and headings.
Verdana, sans-serif Apply to body text for description, summary and non-brand-related paragraph messges.
Verdana, sans-serif General topic html headings
To designers: When creating the mockups, identify and apply the correct font face as per usage specified, and indicate them to developers for implementation.
To developers: When using 3ds regular webfont, don't set properties for font-weight to be bold and font-style to be italic.
Good
.mfg-banner-headline {
font-familay: '3ds_regular-webfont';
}

Bad
.mfg-banner-headline {
font-familay: '3ds_regular-webfont';
font-weight: bold;
}

2. Font Size

Usage Type Font Face Font Size
Site Name 3ds_semibold-webfont 20px
3ds-semibold won't look good if<18px.
Marketing and brand-related headline and taglines 3ds_semibold-webfont
30+px
Size may vary according to the length of text.
Maketing related section tiles 3ds_regular-webfont
30+px
Size may vary according to the length of text.
Page tiles 3ds_regular-webfont 24px
Menu names on main navigation bar 3ds_regular-webfont 16px
Maketing related message paragraph Verdana, sans-serif
17+px
Size may vary according to the length of text.
Menu names on sub-navigation bar Verdana, sans-serif 13px
Description, summary and message paragraph Verdana, sans-serif 14px
General topic html headings Verdana, sans-serif 36px - h1 heading
36px - h2 heading
24px - h3 heading
18px - h4 heading
18px - h5 heading
18px - h6 heading
Currently use bootstrap default heading size.
MySolidWorks site is responsive, the font-size specified here is for desktop version, it may be changed to smaller size accordingly to adapt the layout on mobile devices.

3. Font Color

Usage Type Font Face Font Color
Site Name 3ds_semibold-webfont Red: #da291c;
Marketing and brand-related headline and taglines 3ds_semibold-webfont White: #fff
Maketing related section tiles 3ds_regular-webfont Darkgray: #333
Maketing related sub-headline and sub-title 3ds_regular-webfont,
3ds_regular-webfont		 Darkgray: #555
Page tiles 3ds_regular-webfont Darkgray: #333
Menu names on main navigation bar 3ds_regular-webfont White: #fff
Maketing related message paragraph Verdana, sans-serif
White: #fff  Darkgray: #333
Menu names on sub-navigation bar Verdana, sans-serif Blue: #336699
Description, summary and message paragraph Verdana, sans-serif Darkgray: #333
To designers: It's better to choose blue/dark-blue tone image as marketing banner that match well primary site color, and better distinguish background with foreground text in white color. Try to avoid of using or introducing other font colors than white for consistency and cleaness.
Samples for Usage of Fonts

1. Marketing Banner on VAR Landing Page


2. Category Section on MFG Landing Page

View Manufacturers by Category

Bootstrap Thumbnail: Beautiful Bootstrap Thumbnail like Material Design Cards
CNC Machining
Sheet Metal
Molding
3D Printing